body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.card {
    background-color: #ffffff;
    /* White background */
    border: 2px solid #4caf50;
    /* Green border */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    margin: 20px;
    padding: 20px;
    opacity: 0;
    /* Initially hidden */
    transform: translate(-100vw, -100vh);
    /* Start off-screen */
    animation: slideIn 1.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
    /* Smooth slide in */
}

@keyframes slideIn {
    to {
        opacity: 1;
        /* Fade in */
        transform: translate(0, 0);
        /* Move to the final position */
    }
}

.card:hover {
    background-color: #e0f7fa;
    /* Light blue background on hover */
    transform: scale(1.05);
    /* Slightly enlarge on hover */
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    width: 100%;
    border: 2px solid #ff5722;
    /* Orange border */
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.form-control:focus {
    border-color: #ff9800;
    /* Darker orange on focus */
    box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
    outline: none;
}

.form-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.form-column {
    flex: 1 1 calc(33.333% - 20px);
    /* Three columns with gap */
    min-width: 300px;
    /* Minimum width for responsive design */
}

button.btn.btn-danger {
    background-color: #e91e63;
    /* Pink background */
    border-color: #e91e63;
    /* Pink border */
    color: #ffffff;
    font-weight: bold;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button.btn.btn-danger:hover {
    background-color: #d81b60;
    /* Darker pink on hover */
    transform: scale(1.1);
    /* Larger scale on hover */
}

button.btn.btn-danger:active {
    background-color: #c2185b;
    /* Even darker pink on click */
}

.field-errors {
    color: #f44336;
    /* Red color for errors */
    font-weight: bold;
    margin-top: 5px;
}

@media (max-width: 900px) {
    .form-column {
        flex: 1 1 calc(50% - 20px);
        /* Two columns on smaller screens */
    }
}

@media (max-width: 600px) {
    .form-column {
        flex: 1 1 100%;
        /* One column on smallest screens */
    }
}